<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>热词</title>
	<script src="../../components/echarts-4.0.4.min.js"></script>
	<style>
		body,html{
			padding: 0;
			margin: 0;
			background:#0A0F23;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div style="width: 100%;height: 100%;" id="hotWord"></div>
</body>
<script>
	var hotWord = echarts.init(document.getElementById('hotWord'));
	var hotWordTitle = "军工类科研院所仪器共享  TOP5";
	var hotWordData= ["中国电子科技集团第二十研究校准检测实验室","先导院","中国科学院西安光学精密机械研究所","西安精密机械研究所","西安应用光学研究所"];
	var hotWordNum = [1622,156,152,148,142];
	var itemStyle =  {
        normal: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 1,
                color: '#297bcd'
            }, {
                offset: 0,
                color: '#0de2ff'
            }]),
            shadowColor: '#297bcd',
            shadowBlur: 10
        }
    };
	var option = {

		title: {
			text: hotWordTitle,
			left: 'center',
			top:"5%",
            textStyle: {
                fontSize: 22,
                color: '#fff'
            }
		},
		tooltip: {
			trigger: 'none',
			show:false
		},
		grid: {
			left: '5%',
			right: '10%',
			bottom: '2%',
			top:"18%",
			containLabel: true
		},
		animationDuration: function (idx) {
		    // 越往后的数据延迟越大 
		    return idx * 8000;
		},
		xAxis: {
			type : 'value',
			// min:0,
			// max: 70,
			interval: 10,
			show:false,
			axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                alignWithLabel: true,
                lineStyle: {
                    color: '#fff'
                }
            },
			splitLine: {
                show: false
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#fff',
                	fontSize: 16
                }
            }
		},
		yAxis: {
			type: 'category',
			data: hotWordData,
			inverse:true,
			axisTick: {
				show:false,
				alignWithLabel: true
			},
			axisLine: {
				show:false,
	            lineStyle: {
	                color: '#fff'
	            }
            },
            axisTick: {
            	show:false,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#fff',
                	fontSize: 16
                },
                formatter:function(value)  
                {  
                    if (value.length>6) {  
                        return value.substring(0,6)+"...";  
                    }  
                    else {  
                        return value;  
                    } 
                } 

            },
			splitLine: {
                show: false
            }
		},
		series: [
			{
				name: '政策名称：',
				type: 'bar',
				data: hotWordNum,
				barWidth :"40%",
				itemStyle:itemStyle,
				label: {
	                normal: {
	                    show: true,
	                    position: 'right',
						color:"#fff",
                		fontSize: 16
	                }
	            }
			},
			
		]
	};
    hotWord.setOption(option);
</script>
</html>